<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .xxx {
        margin-left: 300px;
        margin-top: 100px;
      }

      .column {
        float: left;
      }

      .cart-head {
        width: 988px;
        height: 32px;
        line-height: 32px;
        background: #f3f3f3;
        padding: 5px 0;
        border: 1px solid #e9e9e9;
        border-top: 0;
        font-size: 12px;
        margin-bottom: 1px;
      }

      .checkbox {
        width: 122px;
        height: 18px;
        line-height: 18px;
        padding-left: 11px;
        padding-top: 7px;
      }

      .checkAll {
        margin-right: 5px;
        vertical-align: text-bottom;
      }

      .goods {
        width: 208px;
      }

      .props {
        width: 140px;
        height: 32px;
        padding: 0 10px 0 20px;
      }

      .price {
        width: 120px;
        padding-right: 50px;
        text-align: right;
      }

      .quantity {
        width: 80px;
        text-align: center;
      }

      .sum {
        width: 100px;
        padding-right: 40px;
        text-align: right;
      }

      .action {
        width: 75px;
      }

      .cart-foot {
        position: relative;
        width: 988px;
        height: 50px;
        border: 1px solid #f0f0f0;
        font-size: 12px;
      }

      .cart-foot .left {
        float: left;
        width: 363px;
        height: 50px;
      }

      .select-all {
        float: left;
        width: 49px;
        height: 50px;
        line-height: 50px;
        padding-left: 9px;
      }

      .select-all .checkAll {
        margin: 5px 3px 0 0;
        vertical-align: text-bottom;
      }

      .operation {
        float: left;
        width: 305px;
        height: 50px;
        line-height: 50px;
      }

      .operation a {
        float: left;
        margin-left: 10px;
        color: #666;
        text-decoration: none;
      }

      .cart-foot .right {
        /*  position: absolute;
            top: 0;
            right: 0; */
        float: left;
        width: 625px;
        height: 50px;
      }

      .price-sum {
        float: right;
        width: 220px;
        height: 50px;
        line-height: 50px;
        color: #999;
      }

      .totalAmount {
        padding: 0 3px;
      }

      .total {
        color: #e22312;
        font-size: 16px;
        font-weight: 700;
      }

      .btn-area {
        float: right;
        width: 95px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: #e22312;
        font-size: 18px;
        font-weight: 700;
      }

      .btn-area a {
        color: #fff;
        text-decoration: none;
      }

      .item {
        width: 988px;
        height: 119px;
        line-height: 119px;
        border-top: 1px solid #f0f0f0;
        font-size: 12px;
      }

      .checkUnit {
        width: 115px;
        height: 119px;
        padding-left: 13px;
      }

      .white {
        width: 95px;
        height: 119px;
      }

      .shop {
        width: 380px;
        height: 119px;
      }

      .shop img {
        margin-top: 15px;
        border: 1px solid rgba(204, 204, 204, 0.548);
        float: left;
        height: 100px;
      }

      .shop .desc {
        float: left;
        width: 190px;
        height: 119px;
        line-height: 30px;
        padding-top: 15px;
        padding-left: 20px;
      }

      .count button {
        width: 23px;
        height: 20px;
        border: 1px solid #cbcbcb;
        background-color: #fff;
      }

      .count input {
        width: 30px;
        height: 20px;
        outline: none;
        text-align: center;
        border: 1px solid #cbcbcb;
        box-sizing: border-box;
      }

      .unitPrice {
        width: 90px;
        height: 119px;
      }

      .count {
        width: 140px;
        height: 119px;
      }

      .subtotal {
        width: 72px;
        height: 119px;
      }

      .handle {
        width: 83px;
        height: 119px;
      }

      .handle a {
        display: block;
        line-height: 55px;
        color: #808080;
        text-decoration: none;
      }

      .bg {
        background-color: rgba(233, 158, 19, 0.226);
      }
      
    </style>
  </head>

  <body>
    
    <div class="xxx">
      <div class="cart-head">
        <div class="column checkbox">
          <input type="checkbox" class="checkAll" />
          全选
        </div>
        <div class="column goods">商品</div>
        <div class="column props"></div>
        <div class="column price">单价</div>
        <div class="column quantity">数量</div>
        <div class="column sum">小计</div>
        <div class="column action">操作</div>
      </div>
      <div class="cart-body"></div>
      <div class="cart-foot">
        <div class="left">
          <div class="select-all">
            <input type="checkbox" class="checkAll" />
            全选
          </div>
          <div class="operation">
            <a href="javascript:;">删除选中的商品</a>
            <a href="javascript:;">移入关注</a>
            <a href="javascript:;"> </a>
            <a href="javascript:;">
                <strong>清理购物车</strong>
            </a>
        </div>
    </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
        <div class="btn-area">
            <a href="javascript:;">去结算</a>
        </div>
        <div class="price-sum">
            <span>已选择</span><em class="totalAmount">0</em><span>件商品</span>
            <span>总价：￥</span><em class="total"></em>
        </div>
    </div>
</div>
</div>
<div class="footer">
    <div class="footer-da">
      <div class="footer-links">
        <li><a href="">帮助中心</a></li>
        <li class="shu">|</li>
        <li><a href="">公司介绍</a></li>
        <li class="shu">|</li>
        <li><a href="">品牌识别</a></li>
        <li class="shu">|</li>
        <li><a href="">公司大事记</a></li>
        <li class="shu">|</li>
        <li><a href="">协议及隐私权政策</a></li>
        <li class="shu">|</li>
        <li><a href="">廉正举报</a></li>
        <li class="shu">|</li>
        <li><a href="">联系合作</a></li>
        <li class="shu">|</li>
        <li><a href="">招聘信息</a></li>
        <li class="shu">|</li>
        <li><a href="">防骗秘籍</a></li>
      </div>
      <div class="footer-fn">
        <div class="footer-fn-fl">
          <img src="../images/官网图标.png" alt="" class="tubiao">
          <div class="erweima">
            <img src="../images/二维码.jpg" alt="" >
            <span>APP下载</span>
          </div>
         
        </div>
        <div class="footer-rt">
          <div class="footer-rt-contant">
            <a href="">在线客服</a>
          </div>
        </div>
        <ul class="footer-ul">
            <li class="jing"><a href="">京ICP证031057号</a></li>
            <li class="rooter-shu">|</li>
            <li class="jing"><a href="">京ICP备11043884号</a></li>
            <li class="rooter-shu">|</li>
            <li class="jing"><a href="">京公网安备11010502037341号</a></li>
            <li class="rooter-shu">|</li>
            <li class="jing"><a href="">广播电视节目制作经营许可证(京)字第02253号</a></li>
        </ul>
        <div class="footer-words">
          <ul class="footer-words-fl">
            <li class="footer-rt-t">网络文化经营许可证 京网文[2019]4082-420号</li>
            <li class="shu">|</li>
            <li class="footer-rt-t">营业性演出许可证京市演587号</li>
          </ul>
           
            <ul class="footer-ft-words">
              <li>北京大麦文化传媒发展有限公司 版权所有大麦网Copyright 2003-2020 All Rights Reserved</li>
            </ul>
            <ul class="footer-rt-words">
              <li>举报投诉：damai_tousu@member.alibaba.com   浙江省杭州市余杭区文一西路969号</li>
            </ul>  
            <ul class="footer-at-words">
              <li>违法不良信息举报电话：020-62108294</li>
            </ul>  

      </div>
      <div class="footer-ft-img">
        <a href="" title="电子营业执照">
          <img src="../images/电子营业执照.png" alt="">
        </a>
        <a href="">
          <img src="../images/pic.png" alt="" class="pic">
        </a>
        <a href="">
          <img src="../images/诚信网站.png" alt="" class="logo">
        </a>

      </div>
    </div>
  </div>
  <div class="item">
   <div class="item-da"></div>
   <a href="">APP下载</a>
   <!-- <p></p> -->
  </div>
  <div class="item-fo">
    <div class="item-xia"></div>
    <a href="">回到顶部</a>
  </div>
  <div class="ad">
    <p><span class="close">X</span></p>
    <img src="../images/zz.gif" alt="" />
  </div>
<script>
    var data = [
        {
            "name": "高密度编制 宽版裤",
            "src": "./TTTTTTTTTTTTPPPPPPPPPPPPPP/shop1.jpg",
            "price": "398"
        },
        {
            "name": "男女通用 IDéE 斜纹 背带裤【无性别】春夏新品）",
            "src": "./TTTTTTTTTTTTPPPPPPPPPPPPPP/shop2.jpg",
            "price": "648"
        },
        {
            "name": "不易沾水 连帽大衣",
            "src": "./TTTTTTTTTTTTPPPPPPPPPPPPPP/shop3.jpg",
            "price": "548"
        },
        {
            "name": "高密度编织 锥形裤",
            "src": "./TTTTTTTTTTTTPPPPPPPPPPPPPP/shop4.jpg",
            "price": "398"
        }
    ];
    var cartBody = document.querySelector(".cart-body");
    var totalQuantity = 0; //商品总数
    renderData();
    //渲染数据
    function renderData() {
        var str = "";                       
        for (var i = 0; i < data.length; i++) {
            str += "<div class='item'><div class='checkUnit column'><input type='checkbox' class='checkItem'/></div>" +
                "<div class='shop column'><img src='" + data[i].src + "'/><div class='desc'>" + data[i].name + "</div></div>" +
                "<div class='white column'></div>" +
                "<div class='unitPrice column'>￥<span class='perPrice'>" + data[i].price + "</span></div>" +
                "<div class='count column'><button class='leftbtn'>-</button><input type='text' class='amount' value='1'/><button class='rightbtn'>+</button></div>" +
                "<div class='subtotal column'>￥<span class='smallPrice'>" + data[i].price + "</span></div>" +
                "<div class='handle column'><a href='javascript:void(0);' class='delete'>删除</a><a href='javascript:;'>移入关注</a></div></div>";
        }
        cartBody.innerHTML = str;
    }
    var checkAlls = document.getElementsByClassName('checkAll'); //获取所有全选框
    var checkItems = document.getElementsByClassName('checkItem');
    var items = document.getElementsByClassName('item');
    var amounts = document.getElementsByClassName('amount');
    var totalAmount = document.querySelector('.totalAmount');
    var total = document.querySelector('.total');
    var totalPrice = 0;
    total.innerText = totalPrice.toFixed(2);
    //全选功能
    for (var i = 0; i < checkAlls.length; i++) {
        checkAlls[i].index = i;
        checkAlls[i].addEventListener('click', function () {
            totalQuantity = 0;
            changeStatus(this.checked);
            checkAlls[this.index == 0 ? 1 : 0].checked = this.checked;
            getTotal();
        })
    }
    function changeStatus(status) {
        for (var i = 0; i < checkItems.length; i++) {
            checkItems[i].checked = status;
            if (status) {
                items[i].classList.add('bg');
                totalQuantity += parseInt(amounts[i].value);
            } else {
                items[i].classList.remove('bg');
            }
        }
        totalAmount.innerText = totalQuantity;
    }
    //减少商品数量功能
    var leftbtns = document.getElementsByClassName('leftbtn');
    for (var i = 0; i < leftbtns.length; i++) {
        leftbtns[i].index = i;
        leftbtns[i].addEventListener('click', function () {
            var amount = amounts[this.index].value;
            if (amount == 1) {
                return;
            } else {
                amount--;
            }
            amounts[this.index].value = amount;
            if (!checkItems[this.index].checked) {
                checkItems[this.index].checked = true;
                items[this.index].classList.add('bg');
            }
            getSubtotal(this.index);
            getGoodsNum();
            getTotal();
        })
    }
    //增加商品数量功能
    var rightbtns = document.getElementsByClassName('rightbtn');
    for (var i = 0; i < rightbtns.length; i++) {
        rightbtns[i].index = i;
        rightbtns[i].addEventListener('click', function () {
            var amount = amounts[this.index].value;
            amount++;
            amounts[this.index].value = amount;
            if (!checkItems[this.index].checked) {
                checkItems[this.index].checked = true;
                items[this.index].classList.add('bg');
            }
            getSubtotal(this.index);
            getGoodsNum();
            getTotal();
        })
    }
    //计算小计
    var perPrice = document.getElementsByClassName('perPrice');
    var smallPrice = document.getElementsByClassName('smallPrice');
    function getSubtotal(index) {
        var Price = parseInt(amounts[index].value) * perPrice[index].innerText;
        smallPrice[index].innerText = Price.toFixed(2);
    }
    //计算商品总数
    function getGoodsNum() {
        var flag = false;
        totalQuantity = 0;
        for (var i = 0; i < checkItems.length; i++) {
            if (checkItems[i].checked) {
                totalQuantity += parseInt(amounts[i].value);
                flag = true;
            }
        }
        if (!flag) {
            for (var i = 0; i < checkAlls.length; i++) {
                checkAlls[i].checked = false;
            }
        }
        totalAmount.innerText = totalQuantity;
    }
    //选择或取消单个商品
    for (var i = 0; i < checkItems.length; i++) {
        checkItems[i].index = i;
        checkItems[i].addEventListener('click', function () {
            if (this.checked) {
                items[this.index].classList.add('bg');
            } else {
                items[this.index].classList.remove('bg');
            }
            getGoodsNum();
            getTotal();
        })
    }
    //计算总价
    function getTotal() {
        totalPrice = 0;
        for (var i = 0; i < checkItems.length; i++) {
            if (checkItems[i].checked) {
                totalPrice += parseFloat(smallPrice[i].innerText);
            }
        }
        total.innerText = totalPrice.toFixed(2);
    }
     //删除单件商品（模拟）
     var deletebtns = document.getElementsByClassName('delete');
        for (var i = 0; i < deletebtns.length; i++) {
            deletebtns[i].index = i;
            deletebtns[i].addEventListener('click', function () {
                items[this.index].remove();
                //更新元素的索引
                for (var i = 0; i < items.length; i++) {
                    deletebtns[i].index = i;
                    leftbtns[i].index = i;
                    rightbtns[i].index = i;
                    checkItems[i].index = i;
                }
                getGoodsNum();
                getTotal();
            })
        }
    </script>
</body>
 
</html>

